<template>
  <div v-loading="loading" class="product-detail">
    <div class="ptdl-top">
      <img :src="require('@/assets/images/icon-goods.png')">
      <p>
        <span>商品编号：</span>
        <span>{{ content.id }}</span>
      </p>
      <div>
        <span>商品状态：</span>
        <span style="color: #2ec290;">{{ content.mdseStatus|filterGoodsStatus }}</span>
      </div>
      <div>
        <span>创建时间：</span>
        <p>{{ content.createDate|filterDate }}</p>
      </div>
      <div>
        <span>上架时间：</span>
        <p>{{ content.up_Date|filterDate }}</p>
      </div>
    </div>
    <div class="ptdl-main">
      <div class="simple-info">
        <h3>基本信息</h3>
        <div class="simple-type">
          <div class="simple-title">所属分类：</div>
          <div class="simple-content">
            <span v-for="(item,i) in span" :key="i">
              {{ item }}&emsp;
              <i class="el-icon-arrow-right">&emsp;</i>
            </span>
          </div>
        </div>
        <div class="simple-name">
          <div class="simple-title">商品名称：</div>
          <div class="simple-content">{{ content.name }}</div>
        </div>
        <div class="simple-picture">
          <div class="simple-title">商品图片：</div>
          <div class="simple-content">
            <el-image
              v-for="(item,i) in content.image"
              v-show="item"
              :key="i"
              style="min-width: 120px;max-width: 120px; height: 120px"
              :src="qnPath(item)"
            >
              <div slot="error" class="image-slot">
                <img style="min-width: 120px;max-width: 120px; height: 120px;float:left" :src="require('../../assets/images/background-upload-false.png')" alt="">
              </div>
            </el-image>
          </div>
        </div>
        <div class="simple-payway">
          <div class="simple-title">付款方式：</div>
          <div class="simple-content">
            <span style="font-weight:600;">{{ content.mdseType ==='0'?'全款付款':'分期付款' }}</span>
            <span
              v-show="!content.mdseType ==='0'"
            >（定金{{ parseFloat(content.ratio)*100 }}%，尾款{{ 100 - parseFloat(content.ratio)*100 }}%）</span>
          </div>
        </div>
        <div class="simple-freight">
          <div class="simple-title">运费：</div>
          <div class="simple-content">{{ content.freight|filterPrice }}&emsp;元</div>
        </div>
      </div>
      <div class="sale-info">
        <h3>销量信息</h3>
        <div>
          <div class="sale-info-title">
            <div class="saleinfo-name">规格名称</div>
            <div class="saleinfo-param">规格参数</div>
            <div class="saleinfo-price">单价（元）</div>
            <div class="saleinfo-stock">库存（件）</div>
            <div class="saleinfo-sale">销量（件）</div>
            <div class="saleinfo-name" style="text-align:center;">销售额（元）</div>
          </div>
          <div v-for="(item,i) in content.propety" :key="i" class="sale-info-content">
            <div class="saleinfo-name">{{ item.propertyName }}</div>
            <div class="saleinfo-param">{{ item.propertyValue }}</div>
            <div class="saleinfo-price">{{ item.unitPrice|filterPrice }}</div>
            <div class="saleinfo-stock">{{ item.amount }}</div>
            <div class="saleinfo-sale">{{ item.sellNum }}</div>
            <div class="saleinfo-name" style="text-align:center;">{{ item.sales|filterPrice }}</div>
          </div>
          <div class="sale-info-allcount">
            <div class="allcount-name">总销量</div>
            <div class="saleinfo-stock" />
            <div class="saleinfo-sale">{{ allSellNum }}</div>
            <div class="saleinfo-name" style="text-align:center;" />
          </div>
          <div class="sale-info-allcount">
            <div class="allcount-name">总销售额（元）</div>
            <div class="saleinfo-stock" />
            <div class="saleinfo-sale" />
            <div class="saleinfo-name" style="text-align:center;">{{ allSales|filterPrice }}</div>
          </div>
        </div>
      </div>
      <div class="assess-info">
        <h3>评价信息</h3>
        <div v-show="!flagAboutAssess" class="assess-nodata">暂无数据</div>
        <div v-show="flagAboutAssess">
          <div class="sale-info-title assess-info-title">
            <div class="lineheight55 saleinfo-name">序号</div>
            <div class="lineheight55 saleinfo-param">评价星级</div>
            <div class="lineheight55 saleinfo-price">评价内容</div>
            <div class="lineheight55 saleinfo-stock">买家</div>
            <div class="lineheight55 saleinfo-sale">操作</div>
          </div>
          <div v-for="(item,i) in assessList" :key="i" class="sale-info-content">
            <div class="saleinfo-name">{{ (i+1+(currentPage-1)*pageSize)|filterNumber }}</div>
            <div class="saleinfo-param">
              <el-rate
                v-model="item.starLevel"
                disabled
                show-score
                text-color="#ff9900"
                :score-template="item.starLevel>4?'好评':item.starLevel>2?'中评':item.starLevel>=0?'差评':'差评'"
              />
            </div>
            <div class="saleinfo-price assess-price">
              <p style="margin-right:10%;">{{ item.introduce }}</p>
              <div
                style="color:#838A9D;"
              >[{{ item.createDate|getDateHistory }}&ensp;{{ item.createDate|getTimeHistory }}]</div>
            </div>
            <div class="saleinfo-stock assess-stock">
              <div>
                <div>买家：{{ item.nickName }}</div>
                <div style="color:#838A9D;">电话:{{ item.phone|phoneChange }}</div>
              </div>
              <div class="callme-icon">
                <router-link :to="{name: 'Chat', query: {to: item.phone}}"><img :src="require('@/assets/images/icon-btn-callme.png')"></router-link>
              </div>
            </div>
            <div class="saleinfo-sale" style="color:#1890FF;">
              <a @click="toCommentDetail(item.id)">查看</a>
            </div>
          </div>
        </div>
        <div v-show="flagAboutAssess" class="page-top">
          <!-- 分页 -->
          <div class="pagination">
            <el-pagination
              :current-page.sync="currentPage"
              :page-size="pageSize"
              layout="prev, pager, next, sizes, jumper"
              :total="noticeCount"
              :hide-on-single-page="true"
              :page-sizes="[6,10, 20, 50, 100]"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
      <div class="traffic-statistics">
        <h3>流量统计</h3>
        <div style="margin-top:10px;">
          <div style="margin-right:200px;">
            商品访问量：
            <span>&emsp;{{ content.visit }}</span>
          </div>
          <div>
            商品收藏量：
            <span>&emsp;{{ content.collection }}</span>
          </div>
        </div>
      </div>
      <div class="operate-history">
        <h3>操作历史</h3>
        <div v-for="(item,i) in historyList" v-show="item.date" :key="i">
          <div class="history-date" style="color:#A8ABB8;text-align:left;">
            <div>{{ item.date|getDateHistory }}</div>
            <div>{{ item.date|getTimeHistory }}</div>
          </div>
          <div class="history-title">{{ item.title }}</div>
        </div>
      </div>
    </div>
    <div class="ptdl-footer">
      <router-link to="/goods/list">返回</router-link>
      <a @click="handleEdit()">编辑商品信息</a>
    </div>
  </div>
</template>

<script>
import { getDate, getTime } from '@/utils/date';
import { getonebyid } from '@/api/goods';
import { getAppraise } from '@/api/comments';
export default {
  filters: {
    getDateHistory: function(value) {
      const date = new Date(value);
      return getDate(date);
    },
    getTimeHistory: function(value) {
      const date = new Date(value);
      return getTime(date, true);
    },
    filterDate: function(value) {
      if (!value) return '出了点小问题呢。';
      const date = new Date(value);
      return getDate(date) + ' ' + getTime(date, true);
    },
    filterGoodsStatus: function(value) {
      switch (value) {
        case '00200001':
          return '已上架';
        case '00200002':
          return '已下架';
        case '00200003':
          return '预上架';
        case '00200004':
          return '总后台下架';
        default:
          return '未知情况';
      }
    },
    filterNumber: function(value) {
      function addZeroPrefix(number) {
        return number < 10 ? `0${number}` : number;
      }
      return addZeroPrefix(value);
    }
  },
  data() {
    return {
      imgUrl: '',
      data: {
        goodsNumber: 'BC256854123654',
        goodsState: '出售中',
        createTime: '2020-01-03 11:30:25',
        shelfTime: '2020-02-03 12:32:15',
        simpleInfo: {
          type: ['桥梁工程材料', '防水板', 'HOPE防水板'],
          name: '厂家直销HOPE防水板',
          imgs: ['test.jpg', 'test.jpg', 'test.jpg', 'test.jpg', 'test.jpg'],
          payWay: { name: '定金付款', begin: '20%', after: '80%' },
          freight: 120
        },
        saleInfo: [
          {
            name: '产品型号+颜色',
            param: 'D80+红色',
            price: 2.0,
            stock: 100,
            sale: 10.0
          },
          {
            name: '产品型号+颜色',
            param: 'D80+黑色',
            price: 3.0,
            stock: 300,
            sale: 50.0
          },
          {
            name: '产品型号+颜色',
            param: 'D2100+红色',
            price: 7.0,
            stock: 400,
            sale: 22.0
          },
          {
            name: '产品型号+颜色',
            param: 'D2100+黑色',
            price: 11.0,
            stock: 500,
            sale: 25.0
          }
        ],
        assessInfo: [
          {
            orderNumb: '01',
            grade: { numb: 5, is: '好评' },
            content: {
              font:
                '非常好的卖家。收到的货非常好！发货速度也快，很满意，希望下次继续合作！！',
              date: 1582870142419
            },
            user: 'dew小路',
            id: '141353412'
          },
          {
            orderNumb: '01',
            grade: { numb: 3, is: '中评' },
            content: {
              font:
                '非常好的卖家。收到的货非常好！发货速度也快，很满意，希望下次继续合作！！',
              date: 1582870142419
            },
            user: 'dew小路',
            id: '141353412'
          },
          {
            orderNumb: '01',
            grade: { numb: 2.5, is: '中评' },
            content: {
              font:
                '非常好的卖家。收到的货非常好！发货速度也快，很满意，希望下次继续合作！！',
              date: 1582870142419
            },
            user: 'dew小路',
            id: '141353412'
          },
          {
            orderNumb: '01',
            grade: { numb: 1, is: '差评' },
            content: {
              font:
                '非常好的卖家。收到的货非常好！发货速度也快，很满意，希望下次继续合作！！',
              date: 1582870142419
            },
            user: 'dew小路',
            id: '141353412'
          }
        ],
        trafficStat: { visit: 1000, collect: 10000 },
        history: [
          { date: 1582870142419, title: '张小平 提交订单' },
          { date: 1582860142319, title: '张小平通过微信支付预付款￥200.00' },
          { date: 1582850142219, title: '张小平通过微信支付预付款￥200.00' },
          { date: 1582840142119, title: '张小平通过微信支付预付款￥200.00' }
        ]
      },
      content: {},
      span: [],
      // 分页
      currentPage: 1,
      pageSize: 6,
      noticeCount: 0,
      allSellNum: 0, // 销量
      allSales: 0, // 销售额
      // 有无评价
      flagAboutAssess: true,
      assessList: [{}],
      // 操作历史列表
      historyList: [],
      loading: false
    };
  },
  computed: {
    allStock() {
      let numb = 0;
      for (const item of this.data.saleInfo) {
        numb += item.stock;
      }
      return numb;
    },
    allSale() {
      let numb = 0;
      for (const item of this.data.saleInfo) {
        numb += item.sale;
      }
      return numb;
    }
  },
  created() {
    this.getDetail();
    this.getCommentsList();
  },
  methods: {
    // 每页多少条
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getCommentsList(1, val);
    },
    // 当前页码
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getCommentsList(val, this.pageSize);
    },
    getDetail() {
      this.loading = true;
      const id = sessionStorage.getItem('goodsDetail');
      getonebyid({ id }).then(res => {
        this.content = res.data.mdse;
        this.historyList = res.data.operation;
        this.span = res.data.span.split(',');
        this.content.image = res.data.mdse.image.split(',');
        for (const item of res.data.mdse.propety) {
          this.allSellNum += item.sellNum;
          this.allSales += item.sales;
        }
        this.loading = false;
      });
    },
    // 获取商品评价列表
    getCommentsList(pageNo = 1, pageSize = 6) {
      const param = {
        pageNo,
        pageSize,
        mdseId: sessionStorage.getItem('goodsDetail'),
        mdseName: '',
        nickName: '',
        shopId: '',
        starLevel: '',
        type: ''
      };
      getAppraise(param).then(res => {
        const mdse = res.data.mdseAssess;
        this.noticeCount = res.data.size;
        for (let i = 0; i < mdse.length; i++) {
          res.data.mdseAssess[i].starLevel = parseFloat(
            res.data.mdseAssess[i].starLevel
          );
          mdse[i].nickName = mdse[i].nickName.replace(/(^\s*)|(\s*$)/g, '');
          const before = mdse[i].nickName.split('').shift();
          const after = mdse[i].nickName.split('').pop();
          if (mdse[i].nickName.length > 2) {
            mdse[i].nickName = before + '**' + after;
          } else {
            mdse[i].nickName = before + '**';
          }
          // if (res.data.mdseAssess[i].userId.length > 10) {
          //   res.data.mdseAssess[i].userId =
          //     res.data.mdseAssess[i].userId.substring(10, 0) + "...";
          // }
        }
        this.assessList = mdse;
        if (mdse && mdse[0]) {
          this.flagAboutAssess = true;
        } else {
          this.flagAboutAssess = false;
        }
      });
    },
    toCommentDetail(value) {
      sessionStorage.setItem('commentDetailId', value);
      this.$router.push('/comments/detail');
    },
    // 编辑
    handleEdit() {
      const value = sessionStorage.getItem('goodsDetail');
      sessionStorage.setItem('handleEdit', value);
      this.$router.push('/goods/add');
    }
  }
};
</script>

<style lang="scss" scoped>
p {
  padding: 0;
  margin: 0;
}
.product-detail {
  width: 100%;
  color: #3c4353;
  font-size: 14px;
  $bordercolor: #e9e9e9;
  background: #f1f5f9;
  .ptdl-top {
    padding: 36px 12%;
    display: flex;
    flex-flow: row nowrap;
    background: #fff;
    margin-bottom: 10px;
    & > p {
      margin: 0 4% 0 1%;
      font-size: 18px;
      font-weight: 600;
      color: rgba(60, 67, 83, 1);
      display: flex;
      flex-flow: row nowrap;
      height: 25px;
      line-height: 25px;
      min-width: 250px;
    }
    img {
      width: 28px;
      height: 28px;
    }
    & > div {
      padding-right: 2%;
      padding-left: 2%;
      border-right: 1px solid $bordercolor;
      line-height: 25px;
      display: flex;
      flex-flow: row nowrap;
      height: 25px;
      span {
        min-width: 70px;
        display: inline-block;
      }
      &:last-child {
        border: none;
      }
      & > p {
        min-width: 138px;
      }
    }
  }
  .ptdl-main {
    padding: 0 11%;
    background-color: #fff;
    margin-bottom: 20px;
    & > div {
      padding-bottom: 30px;
      padding-left: 50px;
      border-bottom: 1px solid #e4e9ef;
      h3 {
        margin: 0;
        padding-top: 30px;
        padding-bottom: 20px;
        text-indent: 11px;
        background: url("../../assets/images/iconbg-nav.png") no-repeat 0 32px;
        background-size: 5px 12px;
      }
      & > div {
        display: flex;
        margin-bottom: 20px;
        font-weight: 400;
        text-align: right;
        text-indent: 11px;
        .simple-title {
          width: 91px;
        }
        .simple-content {
          text-indent: 11px;
        }
      }
    }
    .simple-info {
      & > div {
        line-height: 35px;
      }
    }
    .simple-type {
      .simple-content {
        span {
          &:last-child {
            i {
              display: none;
            }
          }
        }
      }
    }
    .simple-picture {
      .el-image {
        margin-right: 20px;
        border: 1px solid #dce1ee;
        overflow: hidden;
        /deep/.el-image__inner {
          width: 120px;
          height: 120px;
          float: left;
        }
      }
    }
    //销售
    .sale-info {
      & > div {
        display: flex;
        flex-flow: column nowrap;
        text-align: left;
        width: 95%;
        & > div {
          min-height: 54px;
          line-height: 22px;
          display: flex;
          align-items: center;
        }
        .sale-info-title {
          display: flex;
          background: rgba(246, 248, 249, 1);
          border-radius: 4px 4px 0px 0px;
          font-weight: 600;
          border: 1px solid #e4e9ef;
        }
        .sale-info-content {
          display: flex;
          border: 1px solid #e4e9ef;
          border-top: none;
        }
        .sale-info-allcount {
          display: flex;
          border: 1px solid #e4e9ef;
          border-top: none;
          .allcount-name {
            flex: 1 1 64.8%;
          }
        }
        .saleinfo-name {
          flex: 1 1 21.7%;
        }
        .saleinfo-param {
          flex: 1 1 26.35%;
        }
        .saleinfo-price {
          flex: 1 1 16.74%;
        }
        .saleinfo-stock {
          flex: 1 1 21.39%;
        }
        .saleinfo-sale {
          flex: 1 1 13.82%;
        }
      }
    }
    //评价
    .assess-info {
      & > div {
        display: flex;
        flex-flow: column nowrap;
        text-align: left;
        width: 95%;
        & > div {
          min-height: 54px;
          padding-top: 16px;
        }
        .sale-info-title {
          display: flex;
          background: rgba(246, 248, 249, 1);
          border-radius: 4px 4px 0px 0px;
        }
        .assess-info-title {
          padding: 0;
          font-weight: 600;
        }
        .sale-info-content {
          display: flex;
          border: 1px solid #e4e9ef;
          border-top: none;
        }
        .saleinfo-name {
          flex: 1 1 7.44%;
        }
        .saleinfo-param {
          flex: 1 1 21.7%;
          /deep/span {
            text-indent: 0 !important;
          }
          /deep/.el-rate__text {
            display: inline-block;
          }
        }
        .saleinfo-price {
          flex: 1 1 36.84%;
          text-indent: 0;
        }
        .assess-price {
          line-height: 22px;
          margin-top: -5px;
        }
        .saleinfo-stock {
          flex: 1 1 21.1%;
        }
        .assess-stock {
          display: flex;
          line-height: 22px;
          margin-top: -5px;
          .callme-icon {
            height: 20px;
            width: 63px;
            img {
              cursor: pointer;
              height: 20px;
              width: 63px;
              float: left;
            }
          }
        }
        .saleinfo-sale {
          flex: 1 1 12.92%;
        }
      }
      .assess-nodata {
        background: url("../../assets/images/icon-nopeople.png") no-repeat;
        background-size: 24px;
        height: 24px;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        text-indent: 40px;
        width: 110px;
        position: relative;
        left: 50%;
        margin: 40px 0 40px -55px;
        color: rgba(0, 0, 0, 0.25);
      }
      .page-top {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .ptdl-footer {
    background-color: #fff;
    display: flex;
    justify-content: center;
    padding: 16px 0 13px 0;
    width: 100%;
    a:nth-child(1) {
      display: inline-block;
      width: 104px;
      height: 40px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(217, 217, 217, 1);
      border-radius: 5px;
      text-align: center;
      line-height: 40px;
      margin-right: 20px;
      font-size: 14px;
    }
    a:nth-child(2) {
      width: 120px;
      height: 40px;
      background: rgba(17, 130, 251, 1);
      font-size: 14px;
      color: rgba(255, 255, 255, 1);
      font-weight: 400;
      border-radius: 5px;
      text-align: center;
      line-height: 40px;
    }
  }
}
p {
  padding: 0;
  margin: 0;
}
.lineheight55 {
  line-height: 55px !important;
  box-sizing: border-box;
}
//分页
.pagination {
  margin-top: 18px;
  text-align: center;
  width: 600px;
}
.main-product-icon {
  width: 77px;
  height: 20px;
  background: rgba(230, 247, 255, 1);
  border-radius: 11px;
  text-align: center;
  color: #1182fb;
}
.stock-less-icon {
  display: inline-block;
  width: 66px;
  height: 20px;
  text-align: center;
  position: relative;
  top: 5px;
  div {
    background: rgba(247, 87, 87, 1);
    border-radius: 10px;
    opacity: 0.1;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  span {
    display: inline-block;
    width: 100%;
    line-height: 20px;
    color: #e9433a;
    position: absolute;
    z-index: 1;
    left: 0;
    opacity: 0.8;
  }
}
/deep/.el-pagination__jump {
  text-indent: 0;
}
</style>
